<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>未闻花名 - 角色介绍</title>
  <link rel="stylesheet" href="index.css">
  <script src="index.js" defer></script>
</head>
<body>
<header>
  <div class="logo-title">
    <img src="logo.png" alt="网站Logo">
    <h1>未闻花名</h1>
  </div>
</header>
<div class="main-container">
  <div class="carousel">
    <img src="img_2.png" alt="图片1">
    <img src="img_1.png" alt="图片2">
    <img src="image.jpg" alt="图片3">
    <button class="prev">上一张</button>
    <button class="next">下一张</button>
  </div>
  <nav class="main-nav">
    <ul>
      <li><a href="1.html">首页</a></li>
      <li class="dropdown"><a href="jies.html">角色介绍</a>
        <!--    <ul class="dropdown-content">
                <li><a href="#character1">角色1</a></li>
                <li><a href="#character2">角色2</a></li>
            </ul>-->
      </li>
      <li><a href="shi.html">精彩片段</a></li>
      <li><a href="denglu.html">登录</a></li>
    </ul>
  </nav>
  <nav class="side-nav">
    <ul>
      <li><a href="#section1">部分1</a></li>
      <li><a href="#section2">部分2</a></li>
      <li><a href="#section3">部分3</a></li>
      <li><a href="#section4">部分4</a></li>
    </ul>
  </nav>
  <!-- 角色介绍表单 -->
  <div class="characters-form">
    <h2>角色介绍</h2>
    <table class="character-table">
      <tr>
        <th>角色图片</th>
        <th>角色名称</th>
        <th>角色简介</th>
      </tr>
      <tr>
        <td>
          <img src="img_4.png" alt="本间芽衣子" class="character-img">
        </td>
        <td>本间芽衣子 (めんま)</td>
        <td>温柔善良的少女，曾在一次意外中去世，多年后以幽灵的形式出现在朋友们面前...</td>
      </tr>
      <tr>
        <td>
          <img src="img_5.png" alt="宿海仁太" class="character-img">
        </td>
        <td>宿海仁太 (じんたん)</td>
        <td>曾经是六人组的领袖，芽衣子去世后变得孤僻不愿与人交往...</td>
      </tr>
      <!-- 继续添加其他角色 -->
    </table>
  </div>
</div>
<footer>
  <p>&copy; 2024 未闻花名. 妍.</p>
  <div class="social-media">
    <a href="#"><img src="facebook-icon.png" alt="Facebook"></a>
    <a href="#"><img src="twitter-icon.png" alt="Twitter"></a>
    <a href="#"><img src="instagram-icon.png" alt="Instagram"></a>
  </div>
</footer>
</body>
</html>






